<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <currency-input v-model="price" name="name"></currency-input>
</div>

<script>
Vue.component("currency-input", {
    template: '<span>$<input ref="input" :name="name" v-bind:value="value" v-on:input="updateValue($event.target.value)"></span>',
    props: {value: {type: Number, default: 0}, name: {type: String, default: ""}},
    methods: {
        updateValue: function (value) {
            var formattedValue= value.trim().slice(0, value.indexOf(".") === -1 ? value.length : value.indexOf(".") + 3);
            if (formattedValue !== value) {
                this.$refs.input.value = formattedValue;
            }
            this.$emit('input', Number(formattedValue));
        }

    }
})
new Vue({
    el: "#app",
    data: {
        price: ""
    }
})

</script>

</body>
</html>